<template>
  <div class='hyz_logo'>
    <hyzlogo>
      <i class="top"></i>
      <i class="center"></i>
      <i class="bottom"></i>
    </hyzlogo>
    <header>HYZ</header>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'HanYanLogo'
}
</script>

<style scoped>
.hyz_logo{
    --color-rgb: 248 179 127;
}
.hyz_logo {
    display: flex;
    font-size: 1.8rem;
    font-weight: 700;
    gap: 0.25em;
    line-height: 1;
    color: rgb(var(--color-rgb));
    align-items: center;
    cursor: pointer;
}
.hyz_logo header {
    font-size: 80%;
    font-style: italic;
    font-family: Elephant;
    letter-spacing: -.25em;
}
hyzlogo{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 100%;
    color: rgb(var(--color-rgb));
    height: 1em;
    width: 1em;
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
    transition: 1s;
}
hyzlogo i {
    position: absolute;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 .05em 0 rgb(0 0 0 / .2);
    z-index: 2;
    animation: 5s ease;
}
hyzlogo i.top {
    transform: translate(-45%, -45%);
    animation-name: hyzlogo-top;
}
hyzlogo i.bottom {
    transform: translate(45%, 45%);
    animation-name: hyzlogo-bottom;
}
hyzlogo i.center {
    z-index: 1;
    width: 70%;
    border-block: max(.05em, 2px) solid;
    background: none;
    box-shadow: none;
    animation-name: hyzlogo-center;
}
.hyz_logo:hover i {
    animation-iteration-count: infinite;
}
@font-face {
    font-family: "Elephant";
    src: local("Elephanti"), url("@/assets/font/ELEPHNTI.woff2") format("woff2");
    font-style: italic;
    font-weight: 700;
    font-display: swap;
}
@keyframes hyzlogo-top {
    20% {transform: translate(-45%, 0);}
    50% {transform: translate(-45%, -45%);}
    80% {transform: translate(50%, 0);}
}
@keyframes hyzlogo-bottom {
    20% {transform: translate(0 ,45%);}
    50% {transform: translate(45%, 45%);}
    80% {transform: translate(-30%, -50%);}
}
@keyframes hyzlogo-center {
    20% {transform: rotate(-45deg) scale(1.25);}
    50% {transform: none;}
    80% {transform: rotate(180deg) scale(1.5);}
}
</style>
